import React, { Component, PropTypes } from 'react'
import FileAudit from "../../file-audit";
import { deepCopy, deepFullCopy , messages } from "share/common";
import { Button, Icon } from 'antd'
import expenseReportFunction from 'containers/expense-report/expense-report.function'
class SlideExpenseReportDetailExpenseFile extends Component {

  state = {
    showFileAudit: false,
    expenseReportInvoices: []
  };

  isAllowedFile = file => {
    let sections = (file.response ? file.response.fileName : file.fileName).split('.');
    let extension = sections[sections.length - 1].toLowerCase();
    let allowedSuffix = ['png', 'gif', 'jpg', 'jpeg', 'bmp', 'doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx', 'txt', 'pdf'];
    return allowedSuffix.has(extension);
  };

  //数据处理，筛选有图片附件的费用
  handleAllowedFileInvoices = invoices => {
    let tmpInvoices = deepFullCopy(invoices || []);
    return tmpInvoices.map(invoice => {
      if(invoice.attachments) {
        invoice.attachments = invoice.attachments.filter(res => this.isAllowedFile(res));
      }
      return invoice;
    });
  };

  onAuditFile = (invoiceList = []) => {
    this.setState({ expenseReportInvoices: deepCopy(invoiceList) });
  };

  getHasFileExpense = () => {
    const { invoiceData: { expenseReportInvoices }, receiptList } = this.props;
    let attachmentInExpense = expenseReportInvoices.filter(invoice => {
      return invoice.invoiceView && invoice.invoiceView.attachments &&
        invoice.invoiceView.attachments.filter(res => this.isAllowedFile(res)).length > 0
    });
    let attachmentInInvoice = receiptList.filter(invoice => {
      return (invoice.slicingAttachment && this.isAllowedFile(invoice.slicingAttachment)) ||
        (invoice.originAttachment && this.isAllowedFile(invoice.originAttachment))
    });
    return attachmentInExpense.length + attachmentInInvoice.length
  };

  static contextTypes = {
    info: PropTypes.object,
    isWaitForAudit: PropTypes.bool
  };

  render() {
    const { invoiceData, afterClose } = this.props;
    const { info, isWaitForAudit } = this.context;
    const { showFileAudit, expenseReportInvoices } = this.state;
    return this.getHasFileExpense() > 0 ? (
      <a
        onClick={this.toState({ showFileAudit: true })}
        className='slide-expense-report-detail-expense-file'
      >
        <Icon type="eye-o" />&nbsp;{messages('expense-14.key514')/*读图概览*/}
        <FileAudit
          afterClose={afterClose}
          visible={showFileAudit}
          isEnableCheck={isWaitForAudit}
          onAuditChange={this.onAuditFile}
          onCancel={() => this.setState({ showFileAudit: false })}
          info={info}
          invoices={
            this.handleAllowedFileInvoices(
              expenseReportInvoices.length ?
                expenseReportInvoices :
                expenseReportFunction.filterExpenseList(invoiceData.expenseReportInvoices)
            )
          }
        />
      </a>
    ) : null
  }

}

export default SlideExpenseReportDetailExpenseFile;
